<template>
	<view class="container">
		<!-- 维修信息 -->
		<view class="section">
			<view class="title">维修信息</view>
			<view class="info">
				<view class="info-item">
					<text>维修单号：</text>
					<text>3535252</text>
				</view>
				<view class="info-item">
					<text>车主姓名：</text>
					<text>张三</text>
				</view>
				<view class="info-item">
					<text>联系方式：</text>
					<text class="highlight">1993829282</text>
				</view>
				<view class="info-item">
					<text>维修方式：</text>
					<text>上门取车/到店维修</text>
				</view>
				<view class="info-item">
					<text>取车位置：</text>
					<text class="highlight">山阳县32号</text>
				</view>
				<view class="info-item">
					<text>预约日期：</text>
					<text>2022/11/10 11:00</text>
				</view>
				<view class="info-item">
					<text>提交日期：</text>
					<text>2022/11/08 12:34</text>
				</view>
			</view>
		</view>

		<!-- 车辆信息 -->
		<view class="section">
			<view class="title">车辆信息</view>
			<view class="info">
				<view class="info-item">
					<text>车辆类型：</text>
					<text>大客车</text>
				</view>
				<view class="info-item">
					<text>车牌号：</text>
					<text>豫J45323</text>
				</view>
				<view class="image-container">
					<image src="path/to/car/image1.jpg" class="car-image"></image>
				</view>
			</view>
		</view>

		<!-- 维修部位照片 -->
		<view class="section">
			<view class="title">维修部位照片：</view>
			<view class="image-gallery">
				<image src="path/to/part/image1.jpg" class="part-image"></image>
				<image src="path/to/part/image2.jpg" class="part-image"></image>
				<image src="path/to/part/image3.jpg" class="part-image"></image>
			</view>
		</view>

		<button class="confirm-button">确认到场</button>
	</view>
</template>
<script>
	export default {
		onLoad(options) {
			if (options.repair) {
				const repair = JSON.parse(decodeURIComponent(options.repair)); // 将 JSON 字符串解析回对象
				console.log(repair); // 这里可以获取到传递过来的 repair 对象
				// 你可以在这里处理 repair 对象
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		/* 容器内边距 */
		background-color: #e9ecef;
		/* 背景色 */
		min-height: 100vh;
	}

	.section {
		margin-bottom: 20rpx;
		/* 各部分间距 */
		background-color: white;
		border-radius: 12rpx;
		/* 圆角 */
		padding: 20rpx;
		/* 内边距 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		/* 阴影 */
	}

	.title {
		font-weight: bold;
		font-size: 40rpx;
		/* 标题字体大小 */
		color: #333;
		/* 颜色 */
		margin-bottom: 10rpx;
	}

	.info {
		margin-bottom: 10rpx;
		line-height: 1.5;
		/* 行间距 */
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		/* 分行展示 */
		margin-bottom: 10rpx;
		/* 每行间距 */
	}

	.highlight {
		font-weight: bold;
		color: #007AFF;
		/* 高亮颜色 */
	}


	.icon-button {
		font-size: 24rpx;
		/* 图标按钮字体大小 */
		background-color: transparent;
		border: none;
		margin-right: 10rpx;
		/* 右侧间距 */
		cursor: pointer;
	}

	.image-container,
	.image-gallery {
		display: flex;
		flex-direction: row;
		justify-content: start;
		margin-top: 10rpx;
	}

	.car-image,
	.part-image {
		width: 120rpx;
		/* 图片宽度 */
		height: 90rpx;
		/* 图片高度 */
		margin-right: 10rpx;
		border-radius: 8rpx;
		/* 图片圆角 */
		object-fit: cover;
		border: 1rpx solid #ddd;
		/* 边框 */
	}

	.confirm-button {
		background-color: #007AFF;
		/* 按钮颜色 */
		color: white;
		padding: 12rpx 0;
		/* 上下内边距 */
		width: 100%;
		text-align: center;
		border-radius: 8rpx;
		/* 圆角 */
		font-size: 30rpx;
		/* 按钮字体大小 */
		transition: background-color 0.3s;
		/* 过渡效果 */
	}

	.confirm-button:hover {
		background-color: #0056b3;
		/* 悬浮时颜色 */
	}
</style>